<template>
  <div class="page-login">
    <div class="img">
      <img
        src="http://newstu.1000phone.net/static/img/bg2.27824ec.png"
        alt=""
      />
      <el-form
        ref="form"
        :model="model"
        :rules="rules"
        label-width="60"
        hide-required-asterisk
      >
        <h1>学员管理系统</h1>
        <hr>
        <P style="height: 36px;"><i>关注学员每一个瞬间</i></P>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="model.username" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="model.password" type="password" />
        </el-form-item>

        <el-form-item label="验证码" prop="verifyCode">
          <el-space>
            <el-input v-model="model.verifyCode" @keyup.enter="handleLogin" />
            <Captcha ref="captchaRef" v-model="model.captchaId" />
          </el-space>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleLogin">
            Login
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Captcha from "./components/captcha/index.vue";
import { loginAPI } from "@/api/login.js";
export default {
  name: "login",
  components: {
    Captcha,
  },
  data() {
    return {
      model: {
        username: "admin",
        password: "123456",
        captchaId: "",
        verifyCode: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            required: true,
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        verifyCode: [{ required: true, message: "VerifyCode 必须" }],
      },
      loading: false,
    };
  },
  methods: {
    /**
     * 处理登录
     */
    async handleLogin() {
      // if (this.loading) return;

      // 1. 手动表单校验，回调函数，回调函数的参数是一个boolean
      //                Promise  element-ui自带的校验方法 Form Exposes
      await this.$refs.form.validate();

      try {
        // 2. 校验成功，直接去登录
        //    设置 loading 为 true
        this.loading = true;
        const result = await loginAPI(this.model);

        // 3. 登录成功
        // alert("登录成功");
        this.$message.success("登录成功");

        // 4. 将 result.token 写入到 vuex 中
        this.$store.commit("user/setToken", result.token);

        // 5. 跳转回之前要去的页面
        const redirect = this.$route.query.redirect || "/";
        this.$router.replace(redirect);
      } catch (error) {
        // 登录失败，刷新验证码
        this.$refs.captchaRef.refresh();
        this.model.verifyCode = "";
        this.loading = false;
      }

      // this.$refs.form
      //   .validate()
      //   .then(() => {
      //     console.log("校验成功");

      //     return loginAPI(this.model);
      //   })
      //   .then(() => {
      //     console.log("登录成功");
      //     this.$message.success("登录成功");
      //   })
      //   .catch(() => {
      //     console.log("校验失败");
      //     this.$refs.captchaRef.refresh();
      //     this.model.verifyCode = "";
      //     this.loading = false;
      //   });
    },
  },
};
</script>

<style scoped>
.page-login {
  position: relative;
  height: 100vh;
  /* margin: 100px auto; */
  /* background-color: rgba(11, 51, 249, 0.39); */
  background: url("http://newstu.1000phone.net/static/img/bg1.5ea94ef.png")
    no-repeat;
  background-size: cover;
  overflow: hidden;
  border-radius: 10px;
}
h1 {
  width: 380px;
  height: 40px;
  text-align: center;
  margin-left: -30px;
  color: rgb(0, 0, 0);
  /* color: linear-gradient(to right, #aa4b6b, #6b6b83, #3b8d99) */
}
.el-form {
  float: right;
  width: 446px;
  width: 390px;
  /* margin-top: 5px; */
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  margin: 28px auto;
  padding: 50px 40px 5px 0px;
  box-sizing: border-box;
}
.el-button {
  height: 45px;
  width: 100%;
  font-size: 15px;
  border-radius: 6px;
  letter-spacing: 1px;
}
.img {
  width: 855px;
  height: 508px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -254px 0 0 -427px;
  background: url(/static/img/bg2.27824ec.png) no-repeat 0 0 #fff;
  background-size: contain;
  border-radius: 12px;
}
.img img {
  width: 410px;
  height: 508px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -254px 0 0 -427px;
  /* background: url(/static/img/bg2.27824ec.png) no-repeat 0 0 #fff; */
  background-size: contain;
  border-radius: 12px;
}
</style>
